<template>
    <div id="app">
        <router-view/>
    </div>
</template>

<script>
    import {getToken} from '@/utils/auth'
    import Bus from '@/utils/bus'

    export default {
        name: 'App',
        data() {
            return {
                url: `ws://${window.location.host}/websocket/mcc`,
                ws: null
            }
        },
        created() {
            Bus.$on('sendWs', this.sendWs)
        },
        mounted() {
            this.connectWs()
        },
        destroyed() {
            Bus.$off('sendWs')
            if (this.ws) {
                this.ws.close()
            }
        },
        methods: {
            connectWs() {
                this.ws = new WebSocket(this.url)
                this.ws.onopen = event => {
                    console.log('websocket open')
                    let token = getToken()
                    if (token) {
                        this.sendWs({event: 'msgRemind', token})
                    }
                }
                this.ws.onmessage = event => {
                    let msg = JSON.parse(event.data)
                    this.acceptWs(msg)
                }
                this.ws.onclose = event => {
                    console.log('websocket close')
                    this.reconnectWs()
                }
                this.ws.onerror = event => {
                    console.log('websocket error')
                }
            },
            reconnectWs() {
                setTimeout(this.connectWs, 5000)
            },
            sendWs(msg) {
                this.ws.send(JSON.stringify(msg))
            },
            acceptWs(msg) {
                if (msg.event) {
                    Bus.$emit(msg.event, msg)
                }
            }
        }
    }
</script>
<style lang="scss">
    .el-pagination__editor.el-input .el-input__inner {
        line-height: 28px;
    }

    .el-table {
        .el-table__header-wrapper th, .el-table__fixed-header-wrapper th {
            height: 36px;
        }

        .el-table__cell {
            padding: 4px 0;
        }
    }

    .search {
        .el-form-item {
            margin-bottom: 8px;
        }

        .el-form-item--medium .el-form-item__label {
            line-height: 30px;
        }

        .el-form-item--medium .el-form-item__content {
            line-height: 30px;
        }
    }

    .el-input-number .el-input__inner {
        text-align: left;
    }

    .el-dialog__body {
        padding-top: 10px;
        padding-bottom: 10px;
        border-top: 1px solid #e0e0e0;
    }

    .pagination-container {
        margin-top: 0;
    }

    // 兼容safari列头与td对不齐问题
    .el-table__header, .el-table__body, .el-table__footer {
        width: 100% !important;
        table-layout: fixed !important;
    }

    .icon-online {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        background-color: #1cc963;
        width: 15px;
        height: 15px;
        border-radius: 50%;
    }

    .icon-offline {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        background-color: #ff3232;
        width: 15px;
        height: 15px;
        border-radius: 50%;
    }

    //图标和文字对齐
    .el-button {
        vertical-align: middle;

        [class^=el-icon-], [class*=" el-icon-"] {
            vertical-align: middle;
        }

        > span {
            vertical-align: middle;
        }
    }
</style>
